<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        ul{
            margin: 0;
            width: 200px;
            padding: 0;
        }
        .hd{
            background: #ddd;
            font-weight: bold;
            cursor: pointer;
            border-bottom: 1px solid #ccc;
            padding: 5px;
        }
        .bd {
            max-height:0;
            overflow:hidden;
            transition: all 0s ease-out;
        }
        li{
            position: relative;
        }
        li:hover .bd {
            padding: 5px 20px;
            max-height: 600px;
            transition-timing-function: ease-in;
        }
        li:hover:after{
            content:attr(data-msg);
            position:absolute;
            font-size: 12px;
            line-height:25px;
            text-align:center;
            left:205px;
            top:3px;
            border:1px solid green;
            white-space: nowrap;
            padding: 0 3px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
<ul>
    <li data-msg="列表1">
        <div class="hd"> 列表1 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
    <li data-msg="列表2">
        <div class="hd"> 列表2 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
    <li data-msg="列表3">
        <div class="hd"> 列表3 </div>
        <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
    </li>
</ul>
</body>
</html>